@charset "UTF-8";body.layout-top .resizer,body.details .resizer{min-height:18px;cursor:row-resize;position:relative;z-index:10}body.layout-top .resizer{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}@media(min-width:768px) and (min-height:440px){body.layout-top .boxes{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}body.layout-top .top-boxes{width:100%;height:350px;min-height:125px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}body.layout-top .top-boxes[data-number-of-editors="3"] .box{width:32%;width:calc((100% - 60px)/3)}body.layout-top .top-boxes[data-number-of-editors="2"] .box{width:48%;width:calc((100% - 40px)/2)}body.layout-top .top-boxes[data-number-of-editors="1"] .box{width:98%;width:calc(100% - 20px)}body.layout-top.state-htmlOn-cssOff-jsOn .box-html,body.layout-top.state-htmlOn-cssOff-jsOn .box-js{width:46%;width:calc((100% - 60px)/2)}body.layout-top.state-htmlOn-cssOff-jsOn .box-css{width:0}body.layout-top.state-htmlOff-cssOn-jsOn .box-css,body.layout-top.state-htmlOff-cssOn-jsOn .box-js{width:46%;width:calc((100% - 60px)/2)}body.layout-top.state-htmlOff-cssOn-jsOn .box-html{width:0}body.layout-top.state-htmlOn-cssOn-jsOff .box-html,body.layout-top.state-htmlOn-cssOn-jsOff .box-css{width:46%;width:calc((100% - 60px)/2)}body.layout-top.state-htmlOn-cssOn-jsOff .box-js{width:0}body.layout-top.state-htmlOn-cssOff-jsOff .box-html{width:92%;width:calc(100% - 60px)}body.layout-top.state-htmlOn-cssOff-jsOff .box-css,body.layout-top.state-htmlOn-cssOff-jsOff .box-js{width:0}body.layout-top.state-htmlOff-cssOff-jsOn .box-js{width:92%;width:calc(100% - 60px)}body.layout-top.state-htmlOff-cssOff-jsOn .box-html,body.layout-top.state-htmlOff-cssOff-jsOn .box-css{width:0}body.layout-top.state-htmlOff-cssOn-jsOff .box-css{width:92%;width:calc(100% - 60px)}body.layout-top.state-htmlOff-cssOn-jsOff .box-html,body.layout-top.state-htmlOff-cssOn-jsOff .box-js{width:0}body.layout-top .top-boxes .editor-resizer{position:relative;z-index:2;width:18px;cursor:col-resize}body.layout-top .editor-resizer:first-child,body.layout-top body.student .editor-resizer{cursor:auto}body.layout-top .top-boxes .box .box-title-name,body.layout-top .top-boxes .box .box-title-preprocessor-name,body.layout-top .top-boxes .box .file-type-icon{visibility:hidden}body.layout-top .box-title--resizer{position:absolute;left:17px;top:0;z-index:2;pointer-events:none;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transform-origin:left center;transform-origin:left center}body.layout-top .is-horiz-skinny .box-title--resizer{-webkit-transform:translate(-8px,-19px) rotate(90deg) scale(.66);transform:translate(-8px,-19px) rotate(90deg) scale(.66)}body.layout-top .width-readout{left:50%;top:50%;padding:4px 8px}}@media(min-width:768px) and (min-height:440px){body.layout-right .top-boxes{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}body.layout-right #resizer{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}body.layout-right .output_container{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media(min-width:768px) and (min-height:440px){body.layout-side .page-wrap{height:calc(100% - 69px - 40px)}body.layout-side .top-boxes{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:400px;height:100%;min-width:216px}body.layout-side .box-title--resizer{display:none}body.layout-side .output-container{height:100%}body.layout-side .CodeMirror-wrap{height:100%}body.layout-side .top-boxes .box{position:relative;overflow:visible}body.layout-side .top-boxes[data-number-of-editors="3"] .box{height:32%;height:calc((100% - 9px)/3)}body.layout-side .top-boxes[data-number-of-editors="2"] .box{height:32%;height:calc((100% - 6px)/2)}body.layout-side .top-boxes[data-number-of-editors="1"] .box{height:32%;height:calc(100% - 3px)}body.layout-side.state-htmlOn-cssOff-jsOn .box-html,body.layout-side.state-htmlOn-cssOff-jsOn .box-js{height:44%;height:calc((100% - 45px)/2)}body.layout-side.state-htmlOn-cssOff-jsOn .box-css{height:36px}body.layout-side.state-htmlOff-cssOn-jsOn .box-css,body.layout-side.state-htmlOff-cssOn-jsOn .box-js{height:44%;height:calc((100% - 45px)/2)}body.layout-side.state-htmlOff-cssOn-jsOn .box-html{height:36px}body.layout-side.state-htmlOn-cssOn-jsOff .box-html,body.layout-side.state-htmlOn-cssOn-jsOff .box-css{height:44%;height:calc((100% - 45px)/2)}body.layout-side.state-htmlOn-cssOn-jsOff .box-js{height:36px}body.layout-side.state-htmlOn-cssOff-jsOff .box-html{height:88%;height:calc(100% - 81px)}body.layout-side.state-htmlOn-cssOff-jsOff .box-css,body.layout-side.state-htmlOn-cssOff-jsOff .box-js{height:36px}body.layout-side.state-htmlOff-cssOff-jsOn .box-js{height:88%;height:calc(100% - 81px)}body.layout-side.state-htmlOff-cssOff-jsOn .box-html,body.layout-side.state-htmlOff-cssOff-jsOn .box-css{height:36px}body.layout-side.state-htmlOff-cssOn-jsOff .box-css{height:88%;height:calc(100% - 81px)}body.layout-side.state-htmlOff-cssOn-jsOff .box-html,body.layout-side.state-htmlOff-cssOn-jsOff .box-js{height:36px}body.layout-side .editor-resizer,.editor-resizer-console{height:1px;cursor:row-resize}body.layout-side .powers-drag-handle,.box-console .powers-drag-handle{display:block;cursor:row-resize}body.layout-side body.student .editor-resizer,body.layout-side body.student .powers-drag-handle,body.layout-side .editor-resizer:first-child,body.layout-side .box-html .powers-drag-handle{cursor:auto}body.layout-side .resizer{height:100%;width:18px;cursor:col-resize;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:relative;z-index:10}body.layout-side .width-readout{bottom:15px;left:50%;padding:1px 4px}}.CodeMirror{font-family:monospace;height:300px;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-gutters{border-right-width:1px;border-right-style:solid;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;white-space:nowrap}.CodeMirror-cursor{border-left-width:1px;border-left-style:solid;border-right:none;width:0}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left-width:1px;border-left-style:solid;top:0;bottom:0;position:absolute}.CodeMirror{position:relative;overflow:hidden}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:none;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-webkit-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-crosshair{cursor:crosshair}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack::after{content:""}span.CodeMirror-selectedtext{background:0 0}.CodeMirror{font-family:var(--cp-font-family-monospace);font-size:15px;line-height:1.5;background:0 0;height:100%}.CodeMirror pre{z-index:4;margin:0}.CodeMirror-gutters{border:0;background:0 0}@media(max-width:767px),(max-height:440px){.CodeMirror-gutters{display:none}}div.CodeMirror span.CodeMirror-matchingbracket{color:inherit}.CodeMirror-matchingtag{background:0 0}.CodeMirror-sizer{margin-bottom:0!important}.CodeMirror-dialog{background:#eee;padding:5px;font-size:.9rem;position:absolute;top:0;left:0;width:100%;z-index:20;color:var(--cp-color-20)}.CodeMirror-dialog .CodeMirror-search-hint{display:none}.CodeMirror-dialog .CodeMirror-search-field{width:250px!important;font-family:var(--cp-font-family-monospace);font-size:.9rem;line-height:1.3}.CodeMirror-dialog-top button{font-family:var(--cp-font-family);font-size:.8rem;padding:2px 7px;margin:0 1px 0 0;border-width:1px;background:var(--cp-color-16);color:var(--cp-color-1);border-radius:3px}.CodeMirror-dialog-top button:hover,.CodeMirror-dialog-top button:focus{background:var(--cp-color-15)}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:transparent}.CodeMirror-linewidget{overflow:hidden}@media(max-width:767px),(max-height:440px){.CodeMirror-gutter-wrapper{display:none}}@media(max-width:767px),(max-height:440px){.CodeMirror-sizer{margin-left:0!important}}.CodeMirror-foldmarker{color:blue;text-shadow:#b9f 1px 1px 2px,#b9f -1px -1px 2px,#b9f 1px -1px 2px,#b9f -1px 1px 2px;font-family:arial;line-height:.3;cursor:pointer}.CodeMirror-foldgutter{width:.7em}.CodeMirror-foldgutter-open,.CodeMirror-foldgutter-folded{cursor:pointer}.CodeMirror-placeholder{opacity:.5}.CodeMirror-foldgutter-open::after{font-family:sans-serif;content:"▾"}.CodeMirror-foldgutter-folded::after{font-family:sans-serif;content:"▸"}.CodeMirror-hints,.emmet-abbreviation-preview{position:absolute;z-index:10;overflow:hidden;list-style:none;margin:0;padding:2px;-webkit-box-shadow:2px 3px 5px rgba(0,0,0,.2);box-shadow:2px 3px 5px rgba(0,0,0,.2);border-radius:3px;max-height:20em;overflow-y:auto}.CodeMirror-hints .CodeMirror-hint,.emmet-abbreviation-preview .CodeMirror-hint{margin:2px 0;font-size:.9rem;padding:0 4px;border-radius:2px;white-space:pre;cursor:pointer}.firepad .CodeMirror-hints .CodeMirror,.firepad .emmet-abbreviation-preview .CodeMirror{position:relative}.CodeMirror-simplescroll-horizontal div,.CodeMirror-simplescroll-vertical div{position:absolute;background-clip:padding-box!important}.CodeMirror-simplescroll-horizontal,.CodeMirror-simplescroll-vertical{position:absolute;z-index:6}.CodeMirror-simplescroll-horizontal{bottom:0;left:0;height:10px}.CodeMirror-simplescroll-horizontal div{bottom:0;height:100%}.CodeMirror-simplescroll-vertical{right:0;top:0;width:10px}.CodeMirror-simplescroll-vertical div{right:0;width:100%}.other-client{position:relative;pointer-events:none;opacity:.9}.other-client::before{font-family:var(--cp-font-family);background:var(--color,var(--cp-color-12));color:var(--cp-color-1);text-shadow:0 1px 3px rgba(0,0,0,.7);-webkit-box-shadow:0 2px 6px rgba(0,0,0,.3);box-shadow:0 2px 6px rgba(0,0,0,.3);position:absolute;white-space:nowrap;bottom:calc(100% + 7px);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);padding:1px 5px 0;font-size:.8rem;border-radius:3px}.other-client::after{content:"";left:50%;-webkit-transform:translateX(calc(-50% - 1px));transform:translateX(calc(-50% - 1px));position:absolute;bottom:calc(100% - 1px);width:0;height:0;border-top:4px solid var(--color,var(--cp-color-12));border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid transparent}.emmet-abbreviation-preview .CodeMirror{font-size:11px;height:auto;max-width:400px;max-height:300px;border:none;padding:4px 10px}.emmet-abbreviation-preview .CodeMirror .CodeMirror-scroll{overflow:hidden!important;margin-bottom:0;margin-right:0;padding-bottom:0}.emmet-abbreviation-preview .CodeMirror .CodeMirror-vscrollbar{display:none!important}.emmet-abbreviation-preview:not(.has-error) .emmet-abbreviation-preview-error{display:none}.emmet-abbreviation-preview.has-error .CodeMirror{display:none}.emmet-abbreviation-preview .CodeMirror-cursors{visibility:hidden!important}.emmet-abbreviation-preview .emmet-error-snippet-message{padding:5px}.emmet-panel{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;top:0;left:0;z-index:2;width:100%}.emmet-panel-wrapper{width:60%;min-width:100px;max-width:500px;padding:10px;background:#fff;border-bottom-left-radius:3px;border-bottom-right-radius:3px;-webkit-box-shadow:0 3px 15px rgba(0,0,0,.3);box-shadow:0 3px 15px rgba(0,0,0,.3);-webkit-box-sizing:border-box;box-sizing:border-box}.emmet-panel-wrapper input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:12px}.emmet-error-snippet{color:red}.emmet-error-snippet-ptr{position:absolute}.emmet-error-snippet-spacer{white-space:pre}.emmet-error-snippet-line{position:absolute;top:0;left:0;right:-5px;border-top:2px solid currentColor}.emmet-error-snippet-message{padding-top:10px;font-size:11px}.emmet-tag-preview{background:#170;color:#fff;border-radius:2px;padding:2px 4px;font-size:.8em;opacity:.6;margin-top:-16px;margin-left:2px}.emmet-abbreviation-editor .CodeMirror{height:2em;line-height:2;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.15);box-shadow:2px 2px 5px rgba(0,0,0,.15)}.emmet-abbreviation-editor .CodeMirror-lines{padding:0}.inline-editor-notice,.inline-editor-error{background:var(--cp-color-yellow-dark);color:#fff;position:relative;font-size:90%;padding:5px 15px;background-clip:padding-box;-webkit-box-shadow:inset -50px 0 50px -10px rgba(0,0,0,.2);box-shadow:inset -50px 0 50px -10px rgba(0,0,0,.2);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.inline-editor-notice.yellow,.inline-editor-error.yellow{background-color:var(--cp-color-yellow-dark);color:var(--cp-color-14)}.inline-editor-notice.yellow h4,.inline-editor-error.yellow h4{text-transform:none}.inline-editor-notice a,.inline-editor-error a{color:inherit;text-decoration:underline}.box.stylus .inline-editor-notice,.box.pug .inline-editor-notice,.box.stylus .inline-editor-error,.box.pug .inline-editor-error{white-space:pre-wrap}.inline-editor-error{background:var(--cp-color-red);color:#fff}.inline-editor-warning{background:var(--cp-color-yellow);color:var(--cp-color-20)}body:not(.codepen-embed-body) .inline-error-hidden{height:0;padding:0;margin:0;border:0}body:not(.codepen-embed-body) .inline-error-hidden .inline-error-message{visibility:hidden}body:not(.codepen-embed-body) .inline-error-hidden .inline-error-toggle{display:block}.html-errors{padding-left:15px}.error-bar{display:none;position:absolute;z-index:5;bottom:10px;right:10px;width:20px;font-weight:700;text-align:right;color:#fff;padding-right:10px}.error-icon{cursor:pointer;border-radius:50%;width:15px;height:15px;line-height:15px;display:inline-block;text-align:center;background:var(--cp-color-red);color:#fff}.error-icon:hover,.error-icon:focus{background:#fff;color:var(--cp-color-red)}.line-highlight{background:rgba(0,0,0,.2);left:-26px}#keycommands{display:none;top:25px;width:800px;max-width:90%;margin:auto;left:0;right:0;z-index:201;overflow:auto}#keycommands::-webkit-scrollbar{width:10px;height:10px}#keycommands::-webkit-scrollbar-thumb{background:var(--cp-color-11);border-radius:1px}#keycommands::-webkit-scrollbar-track{background:0 0}@supports not selector(::-webkit-scrollbar){#keycommands{scrollbar-color:var(--cp-color-11) transparent;scrollbar-width:thin}}#keycommands h2{margin:15px 0 5px;padding-bottom:3px;border-bottom:1px solid var(--cp-color-11)}#keycommands h2:first-child{margin-top:0}#keycommands .key-group{font-size:14px;margin:0 0 5px;color:var(--cp-color-1)}#keycommands .key-group.split{margin:0 0 15px}.keycommands-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:-10px}.keycommands-container>section{-webkit-box-flex:1;-webkit-flex:1 1 30%;-ms-flex:1 1 30%;flex:1 1 30%;margin:10px 10px 30px}.mac_only,.pc_only{display:none}.pc .pc_only,.mac .mac_only{display:inline}.keycommand{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:var(--cp-color-yellow);font-family:system-ui,monospace;font-size:12px;font-weight:700;white-space:normal;margin-right:.25em}.keycommand .key{margin-right:2px;padding:3px 6px;line-height:1;background:var(--cp-color-6);color:var(--cp-color-16);border-radius:2px}.keycommand .key.-command::before,.keycommand .command-key::before{content:"Cmd/Ctrl"}.mac .keycommand .key.-command::before,.mac .keycommand .command-key::before{margin-top:1px;content:"⌘";line-height:1}.pc .keycommand .key.-command::before,.pc .keycommand .command-key::before{content:"Ctrl "}.command{color:var(--cp-color-yellow);font-weight:700;white-space:normal}.command::before{margin-right:1px}.mac .command::before{content:"⌘"}.pc .command::before{content:"Ctrl "}.command.no-mod::before{content:""}.command-no-mod{white-space:normal;color:var(--cp-color-yellow);font-weight:700}.sharing-panel,.export-panel,.about-editor-panel{background:var(--cp-color-1);-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:3px;position:absolute;top:100%;padding:5px 0;width:220px;color:var(--cp-color-14);opacity:0;visibility:hidden;-webkit-transition:opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;transition:opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;transition:transform .15s,opacity .15s,visibility 0s linear .15s;transition:transform .15s,opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;-webkit-transform:scale(.95);transform:scale(.95);-webkit-transform-origin:top right;transform-origin:top right;-webkit-transform-origin:bottom right;transform-origin:bottom right;cursor:auto;top:auto;width:auto;min-width:200px;max-width:300px;bottom:100%;left:auto!important;right:21px;margin-bottom:1px;padding:15px;white-space:normal;overflow:hidden}.sharing-panel.open,.export-panel.open,.about-editor-panel.open{visibility:visible;opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:0s;transition-delay:0s}.sharing-panel::before,.export-panel::before,.about-editor-panel::before{display:none}.share-buttons,.share-actions{list-style:none}.share-buttons .inline-q,.share-actions .inline-q{float:right;margin-top:2px;opacity:1}.share-buttons .inline-q svg,.share-actions .inline-q svg{fill:var(--cp-color-12)}.share-buttons .inline-q:hover svg,.share-buttons .inline-q:active svg,.share-actions .inline-q:hover svg,.share-actions .inline-q:active svg{fill:var(--cp-color-17)}.tab-layout-modal{background:var(--cp-color-1);-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:3px;position:absolute;top:100%;padding:5px 0;width:220px;color:var(--cp-color-14);opacity:0;visibility:hidden;-webkit-transition:opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;transition:opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;transition:transform .15s,opacity .15s,visibility 0s linear .15s;transition:transform .15s,opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;-webkit-transform:scale(.95);transform:scale(.95);-webkit-transform-origin:top right;transform-origin:top right;border:3px solid var(--cp-color-15);background:var(--cp-color-17);top:70px;left:1rem;right:1rem;bottom:2rem;margin:0 auto auto;padding:0;color:var(--cp-color-1);border-radius:4px;z-index:200;-webkit-transform:scale(.9);transform:scale(.9);-webkit-transform-origin:center center;transform-origin:center center;width:700px;max-width:calc(100% - 2rem);max-height:80vh}.tab-layout-modal.open{visibility:visible;opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:0s;transition-delay:0s}@media(max-width:767px),(max-height:440px){.tab-layout-modal{top:30px;width:auto;max-height:none}}@media(max-width:550px){.tab-layout-modal{width:100%;width:calc(100% - 2rem)}}html[class*=" safari"] .tab-layout-modal{max-height:600px}.open>.tab-layout-modal,.tab-layout-modal.open{opacity:1;visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.tab-layout-modal .ios-toggle-wrap.template-wrap{margin:0}.tab-layout-modal input[type=name],.tab-layout-modal input[type=text],.tab-layout-modal input[type=email],.tab-layout-modal input[type=password],.tab-layout-modal input[type=search],.tab-layout-modal input[type=url],.tab-layout-modal input[type=number],.tab-layout-modal textarea{background:var(--cp-color-4)!important;border-color:var(--cp-color-4)!important;color:var(--cp-color-14)}.tab-layout-modal input[type=name]:focus,.tab-layout-modal input[type=text]:focus,.tab-layout-modal input[type=email]:focus,.tab-layout-modal input[type=password]:focus,.tab-layout-modal input[type=search]:focus,.tab-layout-modal input[type=url]:focus,.tab-layout-modal input[type=number]:focus,.tab-layout-modal textarea:focus{outline:3px solid var(--cp-color-blue)}.tab-layout{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.tab-layout>.tabs{padding-bottom:0}.tab-layout>.tab-page{display:none}.tab-layout>.tab-page.active{display:block}.tab-layout footer{background:var(--cp-color-15);border-radius:0 0 4px 4px;-webkit-box-shadow:0 -4px 10px var(--cp-color-shadow);box-shadow:0 -4px 10px var(--cp-color-shadow);padding:.75rem;position:relative}.tab-layout footer .close,.tab-layout footer .save-and-close{margin-left:auto}.tab-layout footer .save-and-close-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.tab-layout footer .save-and-close-wrap.pro{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin-top:.25rem}.tab-layout footer .save-and-close-wrap.pro .ios-toggle-wrap{background:0 0}.tab-layout footer .save-and-close-wrap.pro .ios-toggle{margin:0 .25rem}.tab-layout footer .save-and-close-wrap.pro .badge{margin-left:.25rem}.tab-layout footer .save-and-close-wrap .button-upsell{border-width:2px;border-color:var(--cp-color-12);background:var(--cp-color-13);-webkit-transition:.3s ease all;transition:.3s ease all;white-space:normal}.tab-layout footer .save-and-close-wrap .button-upsell span{-webkit-transition:.3s ease all;transition:.3s ease all}.tab-layout footer .save-and-close-wrap .button-upsell:hover,.tab-layout footer .save-and-close-wrap .button-upsell:active{background:var(--cp-color-yellow);border-color:var(--cp-color-yellow);color:var(--cp-color-20)}.tab-layout footer .save-and-close-wrap .button-upsell:hover span,.tab-layout footer .save-and-close-wrap .button-upsell:active span{background:var(--cp-color-20);color:var(--cp-color-1)!important}.tab-layout-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;border-bottom:2px solid var(--cp-color-14);margin:.375rem 1.25rem 0}.tab-layout-header .save-and-close{background:0 0;margin-right:-7px}.tab-layout-header .save-and-close svg{fill:var(--cp-color-10);-webkit-transition:.2s ease all;transition:.2s ease all}.tab-layout-header .save-and-close:hover svg,.tab-layout-header .save-and-close:focus svg{fill:var(--cp-color-1)}.room-professor.student .tab-layout-header .save-and-close-wrap{display:none}.tab-layout-header-title{font-family:var(--cp-font-family);color:inherit;margin:.2rem auto 0 0;font-size:1.125rem;font-weight:700;border-bottom:2px solid var(--cp-color-green);padding:.625rem 0;margin-bottom:-2px}.tab-layout-tabs{overflow-y:auto;overflow-x:hidden;padding:1rem 0;margin-bottom:0!important}.tab-layout-tabs::-webkit-scrollbar{width:10px;height:10px}.tab-layout-tabs::-webkit-scrollbar-thumb{background:var(--cp-color-11);border-radius:1px}.tab-layout-tabs::-webkit-scrollbar-track{background:var(--cp-color-18)}@supports not selector(::-webkit-scrollbar){.tab-layout-tabs{scrollbar-color:var(--cp-color-11) var(--cp-color-18);scrollbar-width:thin}}@media(max-width:767px),(max-height:440px){.tab-layout-tabs{padding:.2rem 0 1rem;margin:1rem .75rem 0;overflow-y:hidden;overflow-x:auto;white-space:nowrap;border-bottom:2px solid var(--cp-color-14)}}.tab-layout-tabs a{display:block;color:var(--cp-color-1);-webkit-transition:.3s ease;transition:.3s ease;-webkit-transition-property:background-color,-webkit-transform;transition-property:background-color,-webkit-transform;transition-property:transform,background-color;transition-property:transform,background-color,-webkit-transform;line-height:1.7;padding:0 1.25rem;overflow:hidden;position:relative}.tab-layout-tabs a::before{position:absolute;left:0;top:0;bottom:0;content:"";width:3px;background:var(--cp-color-green);-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:inherit;transition:inherit}.tab-layout-tabs a.active,.tab-layout-tabs a:hover,.tab-layout-tabs a:active{background:var(--cp-color-14)}.tab-layout-tabs a.active{font-weight:700}.tab-layout-tabs a.active::before{-webkit-transform:translateX(0);transform:translateX(0)}@media(max-width:767px),(max-height:440px){.tab-layout-tabs a{display:inline-block;padding:0 .5rem}.tab-layout-tabs a::before{display:none}}.tab-layout-tab-group{margin-bottom:1rem}@media(max-width:767px),(max-height:440px){.tab-layout-tab-group{margin-bottom:0;display:inline-block}}.tab-layout-tab-group-heading{font-size:.8rem;text-transform:uppercase;color:var(--cp-color-10);padding:0 1.25rem;margin-bottom:.25rem}@media(max-width:767px),(max-height:440px){.tab-layout-tab-group-heading{padding:0 .5rem;margin-top:.5rem}}.tab-layout-wrapper{padding-bottom:1rem;height:100%;overflow-y:hidden;display:grid;grid-template-columns:170px 1fr;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}@media(max-width:767px),(max-height:440px){.tab-layout-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}}.tab-page{overflow-y:auto;overflow-x:hidden;height:100%;padding:1.125rem 1.25rem 3rem}.tab-page::-webkit-scrollbar{width:10px;height:10px}.tab-page::-webkit-scrollbar-thumb{background:var(--cp-color-11);border-radius:1px}.tab-page::-webkit-scrollbar-track{background:var(--cp-color-18)}@supports not selector(::-webkit-scrollbar){.tab-page{scrollbar-color:var(--cp-color-11) var(--cp-color-18);scrollbar-width:thin}}html[class*=" safari"] .tab-page{height:500px}.tab-page h3{height:0;overflow:hidden;margin:0}.tab-page>*:last-child{padding-bottom:1rem}.tab-page p a:not(.button){border-bottom:1px solid var(--cp-color-link-on-black)}.tab-page p a:not(.button):hover,.tab-page p a:not(.button):focus{color:var(--cp-color-link-on-black);border-bottom:none}.tab-page .error{display:none;margin:8px 0;color:var(--cp-color-red)}.tab-page .callout{padding:.125rem 0 .25rem;background:var(--cp-color-blue-dark);text-align:center;font-weight:700;display:block;color:#000;margin:.75rem 0 .5rem;border-radius:3px}.room-professor.student .tab-page .ios-toggle{opacity:.5;pointer-events:none}.tab-layout .ios-toggle{margin-left:0}.tab-layout .ios-toggle input+label{pointer-events:none}.tab-layout .ios-toggle-mega-label{text-transform:none;letter-spacing:0;margin:.125rem 0 0 3.75rem}.tab-layout .ios-toggle-mega-label span{display:none}.tab-layout .ios-toggle-mega-label::after{opacity:1;content:"Off"}.tab-layout .ios-toggle>input:checked~.ios-toggle-mega-label::after{content:"On"}.tab-layout .radio-list{list-style:none;color:var(--cp-color-6)}.tab-layout .top-label-form label.small-inline{text-transform:none;margin:0;vertical-align:top;line-height:1.6;font-size:1rem;letter-spacing:0;margin-left:.25rem}.pen-tags,.project-settings-modal input.project-tags{margin:0 0 2px}.tags{position:relative;margin:0 0 10px}.tags-label{position:relative}.tags-label em{font-style:normal;font-size:11px;position:absolute;right:0;bottom:0}.active-tags{white-space:normal}.active-tags>.tag:nth-child(n+6) .tag-name{background:var(--cp-color-red);color:#000}.tag{font-size:12px;color:var(--cp-color-1);margin:0 10px 5px 0}.tag-x{color:var(--cp-color-8);font-size:11px;cursor:pointer}.tag-x:hover{color:var(--cp-color-red)}.tag-name{padding:2px 6px 3px;background:var(--cp-color-14);border-radius:2px;color:var(--cp-color-8);white-space:nowrap}.at-capacity{color:var(--cp-color-red)}.settings-nub svg{-webkit-transition:-webkit-transform .4s;transition:-webkit-transform .4s;transition:transform .4s;transition:transform .4s,-webkit-transform .4s}.settings-nub.open svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.expander{position:absolute;top:6px;right:10px;font-size:1.1em;overflow:hidden;white-space:nowrap}.expander span{color:var(--cp-color-9);text-shadow:1px 1px 1px var(--cp-color-20)}.expander:hover span,.expander:active span,.expander:focus span{color:var(--cp-color-1)}.item-settings-modal{z-index:201}.item-settings-modal::before{display:none}body.room-pres .item-settings-modal{top:35px}.item-settings-modal .ios-toggle-wrap.template-wrap{margin:0}.settings p a{border-bottom:1px solid var(--cp-color-link-on-black)}.settings p a:hover,.settings p a:focus{color:var(--cp-color-link-on-black);border-bottom:none}.settings .error{display:none;margin:8px 0;color:var(--cp-color-red)}.settings .callout{padding:.125rem 0 .25rem;background:var(--cp-color-blue-dark);text-align:center;font-weight:700;display:block;color:var(--cp-color-20);margin:.75rem 0 .5rem;border-radius:3px}.item-settings-modal .ios-toggle{margin-left:0}.item-settings-modal .ios-toggle input+label{pointer-events:none}.room-professor.student .item-settings-modal .ios-toggle{opacity:.5;pointer-events:none}.item-settings-modal .ios-toggle-mega-label{text-transform:none;letter-spacing:0;margin:.125rem 0 0 3.75rem}.item-settings-modal .ios-toggle-mega-label span{display:none}.item-settings-modal .ios-toggle-mega-label::after{opacity:1;content:"Off"}.item-settings-modal .ios-toggle>input:checked~.ios-toggle-mega-label::after{content:"On"}.item-settings-modal .radio-list{list-style:none;color:var(--cp-color-6)}.item-settings-modal .top-label-form label.small-inline{text-transform:none;margin:0;vertical-align:top;line-height:1.6;font-size:1rem;letter-spacing:0;margin-left:.25rem}.resource-problem-tooltip{display:none;background:var(--cp-color-red);color:var(--cp-color-1);-webkit-box-shadow:0 0 10px var(--cp-color-12);box-shadow:0 0 10px var(--cp-color-12);position:absolute;top:-12px;right:25px;width:25px;height:25px;line-height:25px;font-size:18px;font-weight:700;text-align:center;border-radius:12px}.resource-problem-tooltip:hover,.resource-problem-tooltip:focus{background:var(--cp-color-1);color:var(--cp-color-16)}.resource-problem-tooltip .help-flyout-link{top:0;left:0;width:100%;height:100%;cursor:pointer}.resource-problem-tooltip .icon-help{width:100%;position:absolute;left:0;cursor:pointer}.insecure-resource .external-resource.external-resource,.insecure-resource #head-content{background-color:var(--cp-color-red-very-light)!important;border-color:var(--cp-color-red)!important}.insecure-resource .insecure-resource-tooltip{display:block}.not-using-url-extension .external-resource.external-resource{background-color:var(--cp-color-red-very-light)!important;border-color:var(--cp-color-red)!important}.not-using-url-extension .not-using-url-extension-tooltip{display:block}.external-resource-url-row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;margin-bottom:.5rem;position:relative}.external-resource-url-row .move-external-url{cursor:pointer;margin:10px 5px 0 0;height:17px}.external-resource-url-row .move-external-url svg{fill:var(--cp-color-10)}.external-resource-url-row input{border-radius:4px;padding:12px 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.external-resource-url-row .external-url-option{background:var(--cp-color-4);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center;border-radius:0 4px 4px 0;width:20px;height:18px;margin-bottom:2px;border-bottom:none;cursor:pointer}.external-resource-url-row .external-url-option svg{height:10px;fill:var(--cp-color-10)}.external-resource-actions .add-resource{margin-left:25px;margin-top:-10px;position:relative}.external-resource{padding:7px!important;border-radius:3px 0 0 3px}.remove-external-url,.external-resource{vertical-align:middle}.external-url-option{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:0;cursor:pointer;height:calc(50% - 1px);width:20px;padding:4px 0;border-radius:0 3px 3px 0;position:relative;background:var(--cp-color-4)}.external-url-option svg{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;position:relative;width:12px;height:12px;fill:var(--cp-color-11);pointer-events:none}.remove-external-url:hover{background:var(--cp-color-20)}.remove-external-url:hover svg{fill:var(--cp-color-red)}.open-external-url{text-decoration:none;border:0}.open-external-url:hover{background:var(--cp-color-20)}.open-external-url:hover svg{fill:var(--cp-color-1)}.open-external-url[href=""]{display:none}.resource-actions{margin:3px 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.resource-actions a,.resource-actions button{padding:4px 10px}.resource-actions .button{border:0;color:var(--cp-color-1);margin-right:3px}.resource-actions .button:hover,.resource-actions .button:focus{background:var(--cp-color-blue);color:var(--cp-color-20)}.resource-actions .button.roll-red:hover,.resource-actions .button.roll-red:focus{color:var(--cp-color-1)}.custom-select-wrap{margin-bottom:0}.room-professor.student .custom-select-wrap{opacity:.5;cursor:default;pointer-events:none}.custom-select-wrap select{background:var(--cp-color-4);font-size:14px;font-family:var(--cp-font-family);color:var(--cp-color-11);padding:0 12px;-webkit-appearance:none;outline:0;border-radius:4px}.custom-select-wrap select:focus{outline:3px solid var(--cp-color-blue)}.pen-details .item-details-description{min-height:100px}.pen-details .template-checkbox-row{margin:0}.pen-details h4{font-family:var(--cp-font-family);text-transform:none;margin:0 0 4px;font-size:1rem}.public-private-wrap .pro-upsell{text-align:center}.public-private-wrap .pro-upsell .illustration-pro{margin:1rem 0;position:relative;overflow:hidden}.public-private-wrap .pro-upsell .illustration-pro .blinds,.public-private-wrap .pro-upsell .illustration-pro .blind-top,.public-private-wrap .pro-upsell .illustration-pro .code{position:relative}.public-private-wrap .pro-upsell .illustration-pro .blinds,.public-private-wrap .pro-upsell .illustration-pro .blind-top{position:absolute;top:0;margin:0 auto}.public-private-wrap .pro-upsell .illustration-pro .blind-top{-webkit-transform:translateX(-10px);transform:translateX(-10px);z-index:3}.public-private-wrap .pro-upsell .illustration-pro .blinds{-webkit-transform:translate(-8px,-87%);transform:translate(-8px,-87%);-webkit-transition:1s ease transform;transition:1s ease transform;z-index:2}.public-private-wrap .pro-upsell .illustration-pro .code{margin-top:15px;margin-bottom:15px;z-index:1;-webkit-transition:1s ease opacity;transition:1s ease opacity}.public-private-wrap .pro-upsell .illustration-pro .ios-toggle{position:absolute;left:50%;bottom:4px;margin-left:-22px;z-index:2}.public-private-wrap .pro-upsell .illustration-pro .ios-toggle-mega-label{margin:0;-webkit-transition:.5s ease background;transition:.5s ease background}.public-private-wrap .pro-upsell .illustration-pro .ios-toggle-mega-label::after{position:absolute;left:-2px;top:-2px;content:"";width:30px;height:30px;background:var(--cp-color-1);border-radius:100%;-webkit-transition:.3s ease left;transition:.3s ease left}.public-private-wrap .pro-upsell .illustration-pro input{display:none}.public-private-wrap .pro-upsell .illustration-pro input:checked~.blinds{-webkit-transform:translate(-8px,7px);transform:translate(-8px,7px)}.public-private-wrap .pro-upsell .illustration-pro input:checked~.code{opacity:.5}.public-private-wrap .pro-upsell .illustration-pro input:checked~.ios-toggle{background:var(--cp-color-green)}.public-private-wrap .pro-upsell .illustration-pro input:checked~.ios-toggle .ios-toggle-mega-label::after{left:20px}.public-private-wrap .pro-upsell .illustration-pro .illustration-bg{background:var(--cp-color-16);width:228px;height:163px;border-radius:10px;position:absolute;top:0;left:50%;margin:15px 0 0 -114px;z-index:0}.settings-screenshot-wrap h5,.image-changer h5{text-transform:none;font-size:.9rem}.settings-screenshot-wrap h5{margin-bottom:.25rem}.image-changer{text-align:center}.image-changer p.small{color:var(--cp-color-9);margin-bottom:0}.image-changer .file-upload-button{color:var(--cp-color-1);width:3.75rem;padding:0 .5rem}.image-changer .file-upload-button:focus{outline:0}.image-changer .file-upload-button:focus::before{text-decoration:none}.image-changer .file-upload-button::before{content:"browse";text-decoration:underline}.firefox71 .image-changer .file-upload-button{background:0 0;width:auto;display:block;margin:.25rem auto 0}.firefox* .image-changer .file-upload-button,.firefox63 .image-changer .file-upload-button{width:81px;background:0 0}.screenshot-image{height:auto!important;margin:0 0 1rem;display:inline-block;width:75%;background-size:cover;background-position:center;background-color:var(--cp-color-14);position:relative}.screenshot-image::after{padding-top:56%;display:block;content:""}.screenshot-image.no-screenshot{border:1px solid var(--cp-color-6);text-align:center}.screenshot-image.no-screenshot p{position:absolute;top:80px;width:100%}.screenshot-image .delete-screenshot{position:absolute;bottom:10px;left:50%;color:var(--cp-color-1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.screenshot-description{text-align:center}.screenshot-description-container{width:75%;margin:0 auto 1.5rem}.screenshot-description-copy{margin-top:-.5rem;font-style:italic}.screenshot-area-screenshot{background-color:var(--cp-color-14);border-radius:8px;padding:3px}.screenshot-urls>a{border:0;margin-right:.5rem;display:block;font-size:.9rem;color:#1f9482}.screenshot-urls>a:hover,.screenshot-urls>a:focus{color:#166a5d}.screenshot-urls>a>svg{width:20px;height:20px;margin-right:3px;position:relative;top:2px;vertical-align:sub}.screenshot-urls>a+a{margin-top:.25rem}.algolia-shoutout{font-size:.8rem;text-align:right;margin:-3px 0 5px}.algolia-shoutout img{width:45px;vertical-align:middle;position:relative;top:-1px}.algolia-shoutout a{border-bottom:none;background:var(--cp-color-4);padding:1px 5px;border-radius:0 0 2px 2px;color:var(--cp-color-link-on-white)}.algolia-autocomplete{position:static!important;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.aa-dropdown-menu{width:100%;background:var(--cp-color-14);color:var(--cp-color-1);margin-top:-4px}.package-empty{padding:15px}.aa-suggestion{padding:.65rem 1rem;border-bottom:1px solid var(--cp-color-13);position:relative}.aa-suggestion .package-title{font-size:1.2rem}.aa-suggestion .package-title em{font-weight:700;font-style:normal;color:var(--cp-color-yellow)}.aa-suggestion .package-version{position:absolute;top:1rem;right:1rem}.aa-suggestion .package-description{font-size:.85rem;color:var(--cp-color-7)}.aa-suggestion.aa-cursor{background:var(--cp-color-14);cursor:pointer}.aa-suggestion:hover,.aa-suggestion:focus,.aa-suggestion:active,.aa-suggestion[aria-selected=true]{background:var(--cp-color-16)}.cant-use-package-message{background:#ffffe0}.item-settings-packages:not(.package-settings-disabled) .cant-use-package-message{display:none}.package-settings-disabled .resource-search-bar{opacity:.5;pointer-events:none}.footer-privacy{margin-left:.25rem}.footer-privacy,.footer-privacy .help-flyout-link{position:relative}.footer-privacy .help-flyout-link{top:0;margin-left:.25rem}.footer-privacy .ios-toggle-mega-label-wrap{margin-left:.5rem}.footer-privacy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.settings-row{color:var(--cp-color-1);position:relative;margin:0 0 1rem;padding:1rem;background:-webkit-gradient(linear,left top,right top,from(var(--cp-color-15)),to(var(--cp-color-17)));background:linear-gradient(to right,var(--cp-color-15),var(--cp-color-17));border-left:3px solid var(--cp-color-13)}.settings-row h4{font-family:var(--cp-font-family);text-transform:none;margin:0 0 4px;font-size:1rem}.settings-row p{color:var(--cp-color-6);font-size:1rem;line-height:1.4;margin-bottom:.75em}.settings-row p a{color:var(--cp-color-link-on-black);border-color:var(--cp-color-link-on-black)}.settings-row p a:hover,.settings-row p a:focus{color:var(--cp-color-blue);border-color:var(--cp-color-blue)}.settings-row:last-child,.settings-row>*:last-child{border-bottom:0;margin:0}.item-settings-row-yellow{background:-webkit-gradient(linear,left top,right top,from(hsl(var(--cp-color-yellow-hsl)/0.1)),to(hsl(var(--cp-color-yellow-hsl)/0)));background:linear-gradient(to right,hsl(var(--cp-color-yellow-hsl)/0.1),hsl(var(--cp-color-yellow-hsl)/0));border-left:3px solid var(--cp-color-yellow)}.item-settings-javascript{padding-bottom:400px!important}.head-content{min-height:100px;resize:vertical}#meta-tag-insert{display:inline-block;font-size:.85rem;margin:0;cursor:pointer}.css-preprocessor{margin:0 0 10px}.add-ons{padding-top:1rem}.add-ons h5{margin:0 0 3px}#need-an-addon{margin:0}.need-an-addon-button{border-bottom:none!important;position:absolute;top:0;right:25px}.add-ons-container{border-radius:3px;background:var(--cp-color-14);position:relative}input[type=text].add-ons-filter{font-size:1rem;border-radius:4px 4px 0 0}.add-ons-clear-filter{position:absolute;width:39px;height:39px;top:0;right:0;cursor:pointer;display:none}.add-ons-clear-filter .icon-x{width:14px;height:14px;fill:var(--cp-color-6);margin:12px}.add-ons-scroll{height:130px;overflow-y:scroll;border-radius:0 0 4px 4px}.add-ons-scroll::-webkit-scrollbar{width:10px;height:10px}.add-ons-scroll::-webkit-scrollbar-thumb{background:var(--cp-color-11);border-radius:1px}.add-ons-scroll::-webkit-scrollbar-track{background:0 0}@supports not selector(::-webkit-scrollbar){.add-ons-scroll{scrollbar-color:var(--cp-color-11) transparent;scrollbar-width:thin}}.add-ons-list{list-style:none;background:var(--cp-color-5);padding-bottom:5px}.add-ons-list li{position:relative;padding:4px 5px 4px 10px;color:var(--cp-color-13);border:none}.add-ons-list li.depends-on{padding-left:30px}.add-ons-list li.depends-on .add-on-code::before{content:"↳ ";color:var(--cp-color-10)}.add-ons-list li .help-flyout-link{display:inline-block;right:10px;top:7px;width:14px;height:14px}.add-ons-list li .help-flyout-link .icon-help{fill:var(--cp-color-8)}.add-ons-list li .add-add-on{font-size:.7rem;position:absolute;right:20px;top:6px;padding:2px 5px;border:0}.add-ons-list li .add-add-on:hover,.add-ons-list li .add-add-on:focus{cursor:pointer;color:var(--cp-color-1)}.add-ons-list li:hover,.add-ons-list li:focus{cursor:pointer;color:var(--cp-color-1);background:var(--cp-color-13)}#update::after{content:"";position:absolute;top:1px;left:1px;right:1px;height:3px;border-radius:2px 2px 0 0;background:#ffdd40;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}body.unsaved #update::after{-webkit-transform:scaleX(1);transform:scaleX(1)}.unsaved-wobble{-webkit-animation:wobble .8s forwards;animation:wobble .8s forwards}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-20%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-20%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(15%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(15%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-10%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-10%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(5%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(5%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(0%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(0%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-20%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-20%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(15%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(15%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-10%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-10%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(5%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(5%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(0%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(0%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}.unsaved-grow{-webkit-animation:inyoface .8s forwards;animation:inyoface .8s forwards}@-webkit-keyframes inyoface{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:scale(1.4) rotate(2deg);transform:scale(1.4) rotate(2deg)}100%{-webkit-transform:none;transform:none}}@keyframes inyoface{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:scale(1.4) rotate(2deg);transform:scale(1.4) rotate(2deg)}100%{-webkit-transform:none;transform:none}}.CodeMirror-foldmarker{color:blue;text-shadow:#b9f 1px 1px 2px,#b9f -1px -1px 2px,#b9f 1px -1px 2px,#b9f -1px 1px 2px;font-family:arial;line-height:.3;cursor:pointer}.CodeMirror-foldgutter{width:.7em}.CodeMirror-foldgutter-open,.CodeMirror-foldgutter-folded{cursor:pointer}.CodeMirror-foldgutter-open::after{content:"▾"}.CodeMirror-foldgutter-folded::after{content:"▸"}.console-wrap{height:calc(100% - 36px);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.console-entries{padding:0;margin:0;width:100%;overflow-y:auto;height:100%}.console-entries::-webkit-scrollbar{width:10px;height:10px}.console-entries::-webkit-scrollbar-thumb{background:var(--cp-color-11);border-radius:1px}.console-entries::-webkit-scrollbar-track{background:0 0}@supports not selector(::-webkit-scrollbar){.console-entries{scrollbar-color:var(--cp-color-11) transparent;scrollbar-width:thin}}.console-message{border-bottom:1px solid var(--cp-color-12);margin-bottom:0;padding:10px 10px 5px;white-space:pre-wrap}.console-message:last-of-type{border-bottom:0}.console-message.echo{background:rgba(255,255,255,.07)}.console-message.error{background:rgba(255,0,0,.2);color:#f75c77}.console-message.info,.console-message.debug{background:rgba(255,255,255,.2)}.console-message.warn{background:rgba(235,255,0,.15)}.console-arrow{font-weight:700;padding-left:10px}.console-arrow.forwards{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.console-arrow.forwards::before{content:">"}.console-command-line{background:rgba(255,255,255,.1);padding:0 8px 0 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.console-command-line-input{background:0 0;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;color:var(--cp-color-1);border:0;padding:7px 0 7px 7px;resize:none;overflow:hidden;min-height:30px}.console-command-line-input:disabled{pointer-events:none}.console-command-line-input:focus{background:0 0}.main-header>.header-wrap{border-bottom:1px solid var(--resizer-border,var(--cp-color-16))}body.room-collab .main-header>.header-wrap{border-bottom:1px solid #d4a12c}body.room-professor .main-header>.header-wrap{border-bottom:1px solid #9e53d7}span.inline-note{color:#ffdc40}h4.inline-tour{margin-top:1rem}div.inline-display-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}button.inline-template{margin-left:.66rem}a.inline-display-none{display:none}.inline-editor-commands{padding-right:10px}p.inline-tab-triggers{margin:20px 0 0}.share-static{margin-left:-10px}.share-static a{padding:10px;color:var(--cp-color-8);border-radius:2px}.share-static a:focus,.share-static a:hover{background:var(--cp-color-12);color:var(--cp-color-1)}@media(max-width:767px),(max-height:440px){.share-static a{padding:10px 8px}}@media(max-width:767px),(max-height:440px){.share-static{margin-left:1rem}}.tabs{padding-bottom:40px;position:relative}.tabs>h1{display:inline-block;margin:0 15px 10px 0}.tabs>div{clear:both;display:none}.tabs>div.active{display:block}.tabs .gap{display:inline-block;width:20px}.explore-tabs{margin:0 0 12px;position:relative;font-size:0;white-space:nowrap;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.explore-tabs .explore-tab{font-size:1.1rem;display:inline-block;color:var(--cp-color-9);padding:3px 14px 5px 0}@media(max-width:767px),(max-height:440px){.explore-tabs .explore-tab{padding-right:10px}}.explore-tabs .explore-tab.nav-sep-before{border-left:1px solid var(--cp-color-12);margin-left:10px;padding-left:18px}.explore-tabs .explore-tab:hover,.explore-tabs .explore-tab:focus{color:var(--cp-color-6)}.explore-tabs .explore-tab.active{color:var(--cp-color-1);font-weight:700}.error .explore-tabs .explore-tab{color:var(--cp-color-20)}.explore-tabs .mobile-trigger{font-size:1rem;display:none}.explore-tabs .nav-right{position:absolute;right:0;top:0}.explore-tabs .nav-right .explore-tab{padding-right:0}@media(max-width:550px){.explore-tabs:not(.no-mobile-nav){background:-webkit-gradient(linear,left top,left bottom,from(var(--cp-color-14)),to(var(--cp-color-16)));background:linear-gradient(var(--cp-color-14),var(--cp-color-16));-webkit-box-shadow:0 1px 3px rgba(0,0,0,.75);box-shadow:0 1px 3px rgba(0,0,0,.75);border-bottom:0;height:33px;text-align:left!important}.explore-tabs:not(.no-mobile-nav) .width-wrapper{position:static;padding:0}.explore-tabs:not(.no-mobile-nav).open{height:auto}.explore-tabs:not(.no-mobile-nav).open .explore-tab{position:relative}.explore-tabs:not(.no-mobile-nav).open .mobile-trigger{width:25px}.explore-tabs:not(.no-mobile-nav) .mobile-trigger{cursor:pointer;display:block;position:absolute;top:0;right:0;width:100%;padding:5px 10px 0 0;height:100%;z-index:2;text-align:right}.explore-tabs:not(.no-mobile-nav) .mobile-trigger svg{pointer-events:none;fill:var(--cp-color-9);width:13px;height:13px;display:inline-block}}@media(max-width:550px) and (max-width:550px){.explore-tabs:not(.no-mobile-nav) .mobile-trigger{top:3px}}@media(max-width:550px){.explore-tabs:not(.no-mobile-nav) .explore-tab{display:block;position:absolute;top:0;left:0;width:100%;height:100%;padding:5px 0 4px 8px}.explore-tabs:not(.no-mobile-nav) .explore-tab:hover{background:var(--cp-color-17);color:var(--cp-color-1)}.explore-tabs:not(.no-mobile-nav) .explore-tab .explore-tab.active{border-bottom:0;top:auto;z-index:1;background:-webkit-gradient(linear,left top,left bottom,from(var(--cp-color-14)),to(var(--cp-color-16)));background:linear-gradient(var(--cp-color-14),var(--cp-color-16))}}.explore-tabs.no-mobile-nav{overflow:auto;-webkit-overflow-scrolling:touch}.explore-tabs.no-mobile-nav::-webkit-scrollbar{width:0;height:0}.explore-tabs.no-mobile-nav::-webkit-scrollbar-thumb{background:0 0;border-radius:1px}.explore-tabs.no-mobile-nav::-webkit-scrollbar-track{background:0 0}@supports not selector(::-webkit-scrollbar){.explore-tabs.no-mobile-nav{scrollbar-color:none none;scrollbar-width:none}}html,body{overflow:hidden}body{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-bottom:30px}.page-wrap{padding:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}.boxes{position:absolute;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.top-boxes{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden}@media(max-width:767px),(max-height:440px){.top-boxes .box-html.switch-off,.top-boxes .box-css.switch-off,.top-boxes .box-js.switch-off{visibility:hidden;position:absolute}}.top-boxes .box{height:100%;position:relative;overflow:hidden}.top-boxes .box .code-wrap,.top-boxes .box>pre{overflow:hidden}.top-boxes .box>pre{position:absolute;top:0;left:0;width:100%;height:100%;border:0;resize:none;font-family:var(--cp-font-family-monospace);font-size:12px}.top-boxes .box[data-read-only],.top-boxes .box[data-read-only] .CodeMirror-lines,.top-boxes .box.view-preproc-errors,.top-boxes .box.view-preproc-errors .CodeMirror-lines{cursor:default}.top-boxes .box[data-read-only] .CodeMirror-lines,.top-boxes .box.view-preproc-errors .CodeMirror-lines{opacity:.8}.top-boxes .box[data-read-only] .code-editor-status::after,.top-boxes .box.view-preproc-errors .code-editor-status::after{opacity:1;visibility:visible;-webkit-transition-delay:0s;transition-delay:0s}.top-boxes .box[data-read-only=formatting],.top-boxes .box[data-read-only=formatting] .CodeMirror-lines{cursor:progress}.top-boxes .box[data-read-only=formatting] .code-editor-status::after{content:"Formatting...";background:var(--cp-color-yellow);-webkit-transition-delay:0s,.5s;transition-delay:0s,.5s}.top-boxes .box[data-read-only=view-compiled] .code-editor-status::after{content:"Compiled";background:var(--cp-color-green);-webkit-transition-delay:0s,.5s;transition-delay:0s,.5s}.top-boxes .box[data-read-only] .CodeMirror-linewidget{display:none}.top-boxes .box .code-box{position:absolute;top:-9999px;left:-9999px;width:100px;height:100px;overflow:auto}body.no-line-numbers .code-wrap{padding:0 0 0 5px}.package-details-line-widget-parent{overflow:visible;height:0;padding:0!important;z-index:10!important}.package-details-line-widget{display:block;position:absolute;top:0;right:20px;width:15px;height:15px}.package-details-line-widget .icon-help{fill:#fff;width:14px;height:14px}.package-details-line-widget .icon-help:hover,.package-details-line-widget .icon-help:focus{fill:#eee}.package-details:hover,.CodeMirror-line:hover+.CodeMirror-linewidget .package-details-line-widget{display:block}@media(max-width:767px),(max-height:440px){.CodeMirror{font-size:10px!important}}.editor-actions-left{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}body.room-collab .editor-actions-right{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;top:8px}.link-list,.link-list ul,.link-list ol{list-style:none}.link-list a,.link-list button{color:var(--cp-color-20);display:block;width:100%;text-align:left;border-radius:0;padding:7px 15px 8px;line-height:1.1;font-size:.9rem;text-shadow:none;text-decoration:none}.link-list a:hover,.link-list a:focus,.link-list button:hover,.link-list button:focus{color:inherit;background:#e7e8f1}.link-list a.active,.link-list button.active{background:#c5c8d4}.link-list a.active .view-meta,.link-list button.active .view-meta{color:#e7e8f1}.link-list a span,.link-list button span{opacity:.75}.collaborators-indicators>span{display:inline-block;margin-right:.5rem;font-size:.8rem;line-height:1;padding:2px 4px;border-radius:3px}.powers{background:var(--editor-top-bar-background);white-space:nowrap;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding-right:.5rem}.powers .editor-actions-right{margin-left:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.powers-drag-handle{display:none;position:absolute;width:100%;height:100%;left:0;top:0;z-index:0}.editor-resizer,.resizer{background:var(--resizer-background);border:solid 1px var(--resizer-border);-webkit-box-sizing:border-box;box-sizing:border-box}.layout-top .editor-resizer{border-top:none;border-bottom:none}.layout-top .editor-resizer:first-child{border-left:none}.layout-top .editor-resizer:first-child .box-title{margin-left:1px}.layout-top .editor-resizer.is-horiz-skinny:nth-last-child(2){border-right-color:transparent}.layout-top .resizer{border-left:none;border-right:none}.layout-left .editor-resizer,.layout-right .editor-resizer{border-bottom:none}.layout-left .editor-resizer:first-child,.layout-right .editor-resizer:first-child{border:none}.layout-left .resizer,.layout-right .resizer{border-top:none;border-bottom:none}.box-title{font-family:var(--cp-font-family);border-top:3px solid transparent;white-space:nowrap;font-weight:700;color:var(--cp-color-8);margin:0;font-size:1.1rem;line-height:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:9px 12px}.editor-resizer:not(.is-horiz-skinny) .box-title,.layout-left .box-title,.layout-right .box-title{background:var(--tab-bg);border-top:3px solid var(--tab-border-color)}.box-title-preprocessor-name{font-size:80%;margin-left:.2rem;font-weight:400}.file-type-icon{width:17px;height:17px;-webkit-margin-end:.4rem;margin-inline-end:.4rem}.code-editor-status::after{position:absolute;right:13px;top:47px;font-size:10px;font-weight:400;background:var(--cp-color-green);color:var(--cp-color-20);display:inline-block;padding:0 5px;border-radius:2px;visibility:hidden;opacity:0;-webkit-transition:visibility 0s linear .2s,all .2s linear;transition:visibility 0s linear .2s,all .2s linear;z-index:1}.editor-dropdown{background:var(--cp-color-1);-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:3px;position:absolute;top:100%;padding:5px 0;width:220px;color:var(--cp-color-14);opacity:0;visibility:hidden;-webkit-transition:opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;transition:opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;transition:transform .15s,opacity .15s,visibility 0s linear .15s;transition:transform .15s,opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;-webkit-transform:scale(.95);transform:scale(.95);-webkit-transform-origin:top right;transform-origin:top right;right:0;z-index:100;margin-top:5px}.editor-dropdown.open{visibility:visible;opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:0s;transition-delay:0s}@media(max-width:767px),(max-height:440px){.editor-dropdown{width:auto}}.box.sass .editor-dropdown-folding-list-item{display:none}.code-wrap{overflow:hidden;height:100%;height:calc(100% - 36px)}.code-wrap .CodeMirror-sizer,.code-wrap>pre{min-width:200px}.output-container{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative}.output-sizer{position:absolute;left:0;top:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.result{position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;background:radial-gradient(circle,var(--cp-color-13),var(--cp-color-14))}.result .iframe-visual-update{z-index:1}html.ios .result{overflow:scroll}.result-iframe{border:0;background:var(--cp-color-1);color-scheme:normal;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}.result-iframe.iframe-empty{background:0 0}.loading-text{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:var(--cp-color-7);opacity:1;-webkit-transition:opacity .2s;transition:opacity .2s}.loading-text span{display:inline-block;width:15px;white-space:nowrap;overflow:hidden;letter-spacing:1px;-webkit-animation:exposedots 20s forwards linear;animation:exposedots 20s forwards linear;vertical-align:bottom}body.prelayout .loading-text{opacity:0}@-webkit-keyframes exposedots{to{width:75px}}@keyframes exposedots{to{width:75px}}.drag-cover{position:absolute;z-index:2;top:0;right:0;left:0;bottom:0;display:none}.pen-details-when-dropdown{background:var(--cp-color-1);-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:3px;position:absolute;top:100%;padding:5px 0;width:220px;color:var(--cp-color-14);opacity:0;visibility:hidden;-webkit-transition:opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;transition:opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;transition:transform .15s,opacity .15s,visibility 0s linear .15s;transition:transform .15s,opacity .15s,visibility 0s linear .15s,-webkit-transform .15s;-webkit-transform:scale(.95);transform:scale(.95);-webkit-transform-origin:top right;transform-origin:top right}.pen-details-when-dropdown.open{visibility:visible;opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:0s;transition-delay:0s}.error-list{color:var(--cp-color-9);list-style:none;margin:0!important;font-size:12px}.error-list li{margin:0 0 5px}.error-list li strong{color:var(--cp-color-1)}.width-readout{position:absolute;z-index:50;background:var(--cp-color-6);color:var(--cp-color-13);padding:4px 8px;border-radius:10px;font-size:9px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.5);box-shadow:0 1px 1px rgba(0,0,0,.5);opacity:0;visibility:hidden;-webkit-transition:opacity .1s;transition:opacity .1s}.width-readout.visible{opacity:1;visibility:visible}.box-console{overflow:hidden;display:none;height:30%}@media(min-width:1101px){.keyboard-commands-button::after{content:"Keys";margin-left:.125rem}}html:not(.mac) .keyboard-commands-button::after{content:"Shortcuts"}html:not(.mac) .keyboard-commands-button>span{display:none}.navigation-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.last-saved-message{display:inline-block;margin-right:6px;margin-left:21px;font-size:.9rem}.last-saved-message time{text-transform:none;font:inherit}@media(max-width:550px){.export-button,.embed-modal-button,.keyboard-commands-button{display:none!important}}@media(max-width:767px),(max-height:440px){.assets-button,.embed-modal-button,.live-view-popout-button,.last-saved-message{display:none!important}}@-webkit-keyframes jiggle{0%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}25%{-webkit-transform:rotateZ(9deg);transform:rotateZ(9deg)}75%{-webkit-transform:rotateZ(-9deg);transform:rotateZ(-9deg)}100%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}}@keyframes jiggle{0%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}25%{-webkit-transform:rotateZ(9deg);transform:rotateZ(9deg)}75%{-webkit-transform:rotateZ(-9deg);transform:rotateZ(-9deg)}100%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}}.mobile-editor-nav{display:none}@media(max-width:767px),(max-height:440px){body{min-width:320px;-ms-touch-action:manipulation;touch-action:manipulation}#resizer,.editor-resizer{display:none}.editor-dropdown .maximize-button,.editor-dropdown .minimize-button,.editor-dropdown .editor-dropdown-folding-list-item{display:none}body.editor .boxes{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}body.editor .top-boxes{display:block;width:100%!important;height:40vh;min-height:2em}body.editor .top-boxes .box-title{visibility:hidden}.boxes.mobile-hide-result .top-boxes{height:100%}.boxes.mobile-hide-code .top-boxes{height:40px}.box{width:100%!important;height:100%!important}.code-wrap{padding:5px 10px 0}.mobile-editor-nav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:end;-webkit-align-items:end;-ms-flex-align:end;align-items:end;position:absolute;z-index:1;padding-left:.5rem;text-align:center;width:100%;top:8px;height:32px;overflow:hidden;pointer-events:none}.mobile-editor-nav button{display:block;pointer-events:auto;margin:0;margin-right:1px;padding:8px 16px;min-width:50px;background:var(--cp-color-14);color:var(--cp-color-1);border:none;border-top:2px solid var(--cp-color-13);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.mobile-editor-nav button.selected{border-top:2px solid var(--cp-color-5);background:var(--cp-color-13)}.mobile-editor-nav button:first-child{border-top-left-radius:2px}.mobile-editor-nav button:last-child{border-top-right-radius:2px;margin-right:0}.powers{height:40px}.settings-nub,.editor-dropdown-button{z-index:2;padding:6px 8px}.settings-nub svg,.editor-dropdown-button svg{top:0;width:14px;height:14px}.editor-dropdown-button svg{margin-right:0!important}.output-container{border-top:1px solid var(--cp-color-13)}[data-zoom="1.0"] .result-iframe{width:100%!important;height:100%!important}[data-zoom="0.5"] .result-iframe{width:200%!important;height:200%!important;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:center center;transform-origin:center center;position:absolute;top:-50%;left:-50%}[data-zoom="0.25"] .result-iframe{width:400%!important;height:400%!important;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:center center;transform-origin:center center;position:absolute;top:-150%;left:-150%}body.editor{padding-bottom:0}.site-footer{position:relative;height:auto}.footer-left,.footer-right{padding:4px 0}.site-footer .sharing-button{margin-right:0}.site-footer .template-button,.site-footer .keyboard-commands-button{display:none}}@media(max-width:767px) and (orientation:landscape),(max-height:440px) and (orientation:landscape){body.editor .boxes{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}body.editor .top-boxes{min-height:60px;height:100%!important;width:50%!important}.boxes.mobile-hide-result .top-boxes{width:100%!important}.boxes.mobile-hide-code .top-boxes{width:0!important}.mobile-editor-nav{width:50%;z-index:5}.mobile-hide-code .mobile-editor-nav{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;left:5px}.mobile-hide-code .mobile-editor-nav button{display:none}.mobile-hide-code .mobile-editor-nav #result-toggle{display:inline-block}.mobile-hide-code .mobile-editor-nav #html-toggle{display:inline-block;border-radius:2px}.mobile-hide-code .mobile-editor-nav #html-toggle span{display:none}.mobile-hide-code .mobile-editor-nav #html-toggle::before{content:"Code"}.box{width:100%!important}.powers{height:40px}.output-container{border:none;border-left:1px solid var(--cp-color-13)}.item-title-area{max-width:40%;margin-right:auto}body.editor .main-header .header-wrap{border-bottom:1px solid #444857}}